<template>
	<view class="pageBg">
		<view class="frCardSwiperCnt">
			<fr-card-swiper :autoplay="false" :swiperList="swiperList" @click.stop>
				<!--  #ifdef  MP-WEIXIN -->
				<view v-for="(item, index) of swiperList" :key="index" slot="slot{{index}}">
					<view class="fcs_cnt flex_c_sb_fs" :style="{background:'url(' + item.url + ') no-repeat top center'}">
						<view class="fcs_cntTitle margin_b28 flex_r_sb_c">
							<view class="flex_c_fs_fs">
								<text class="f_32 fw_600 tc_w">{{item.title}}</text>
								<text class="f_24 fw_400 tc_w">{{item.desc}}</text>
							</view>
							<view class="fcs_headerBtn f_28 fw_600 tc_1 flex_c_c_c" @click.stop="headerBtnClick(item, index)">进入会场</view>
						</view>
						<view class="fcs_cntList flex_r_sb_c">
							<block v-for="(subItem, subIndex) in item.list" :key="subIndex">
								<view class="fcs_cntListItem" @click.stop="cntDetailClick(subItem)">
									<image class="fcs_cntListItemImg bg_r" :src="img" mode="aspectFit"></image>
									<view class="fcs_cntListItemContent">
										<view class="flex_r_fs_c">
											<text class="f_28 fw_600 tc_r margin_r16">¥{{subItem.price}}</text>
											<text class="f_20 fw_400 tc_9 td_line">¥{{subItem.o_price}}</text>
										</view>
										<text class="f_24 fw_600 tc_1">{{subItem.name}}</text>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
				<!--  #endif -->
									
				<!-- #ifndef  MP-WEIXIN -->
				<template v-slot:default="item">
					<view class="fcs_cnt flex_c_sb_fs" :style="{background:'url(' + item.url + ') no-repeat top center'}">
						<view class="fcs_cntTitle margin_b28 flex_r_sb_c">
							<view class="flex_c_fs_fs">
								<text class="f_32 fw_600 tc_w">{{item.title}}</text>
								<text class="f_24 fw_400 tc_w">{{item.desc}}</text>
							</view>
							<view class="fcs_headerBtn f_28 fw_600 tc_1 flex_c_c_c" @click.stop="headerBtnClick(item, index)">进入会场</view>
						</view>
						<view class="fcs_cntList flex_r_sb_c">
							<block v-for="(subItem, subIndex) in item.list" :key="subIndex">
								<view class="fcs_cntListItem" @click.stop="cntDetailClick(subItem)">
									<image class="fcs_cntListItemImg bg_r" :src="subItem.img" mode="aspectFill"></image>
									<view class="fcs_cntListItemContent">
										<view class="flex_r_fs_c">
											<text class="f_28 fw_600 tc_r margin_r16">¥{{subItem.price}}</text>
											<text class="f_20 fw_400 tc_9 td_line">¥{{subItem.o_price}}</text>
										</view>
										<text class="f_24 fw_600 tc_1">{{subItem.name}}</text>
									</view>
								</view>
							</block>
						</view>
					</view>
				</template>
				<!-- #endif -->
			</fr-card-swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
					{
						// type: 'image',
						url: 'https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_960_720.jpg',
						id: '01',
						title: '医护上门 限时优惠',
						desc: '优惠升级 惊喜不断',
						list: [
							{
								id: '01',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '02',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2017/05/13/12/40/fashion-2309519_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '03',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2014/07/02/09/09/best-friends-381984_960_720.jpg',
								price: 200,
								o_price: 800,
							},
						],
					}, {
						// type: 'image',
						url: 'https://cdn.pixabay.com/photo/2017/02/08/17/24/fantasy-2049567_960_720.jpg',
						id: '02',
						title: '医护上门 限时优惠',
						desc: '优惠升级 惊喜不断',
						list: [
							{
								id: '01',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '02',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2017/05/13/12/40/fashion-2309519_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '03',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2014/07/02/09/09/best-friends-381984_960_720.jpg',
								price: 200,
								o_price: 800,
							},
						],
					}, {
						// type: 'image',
						url: 'https://cdn.pixabay.com/photo/2015/11/04/20/59/milky-way-1023340_960_720.jpg',
						id: '03',
						title: '医护上门 限时优惠',
						desc: '优惠升级 惊喜不断',
						list: [
							{
								id: '01',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '02',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2017/05/13/12/40/fashion-2309519_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '03',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2014/07/02/09/09/best-friends-381984_960_720.jpg',
								price: 200,
								o_price: 800,
							},
						],
					}, {
						// type: 'image',
						url: 'https://cdn.pixabay.com/photo/2018/08/23/07/35/thunderstorm-3625405_960_720.jpg',
						id: '04',
						title: '医护上门 限时优惠',
						desc: '优惠升级 惊喜不断',
						list: [
							{
								id: '01',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '02',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2017/05/13/12/40/fashion-2309519_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '03',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2014/07/02/09/09/best-friends-381984_960_720.jpg',
								price: 200,
								o_price: 800,
							},
						],
					}, {
						// type: 'image',
						url: 'https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_960_720.jpg',
						id: '05',
						title: '医护上门 限时优惠',
						desc: '优惠升级 惊喜不断',
						list: [
							{
								id: '01',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '02',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2017/05/13/12/40/fashion-2309519_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '03',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2014/07/02/09/09/best-friends-381984_960_720.jpg',
								price: 200,
								o_price: 800,
							},
						],
					}, {
						// type: 'image',
						url: 'https://cdn.pixabay.com/photo/2016/10/20/18/35/earth-1756274_960_720.jpg',
						id: '06',
						title: '医护上门 限时优惠',
						desc: '优惠升级 惊喜不断',
						list: [
							{
								id: '01',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '02',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2017/05/13/12/40/fashion-2309519_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '03',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2014/07/02/09/09/best-friends-381984_960_720.jpg',
								price: 200,
								o_price: 800,
							},
						],
					}, {
						// type: 'image',
						url: 'https://cdn.pixabay.com/photo/2011/12/14/12/21/orion-nebula-11107_960_720.jpg',
						id: '07',
						title: '医护上门 限时优惠',
						desc: '优惠升级 惊喜不断',
						list: [
							{
								id: '01',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2018/03/06/22/57/portrait-3204843_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '02',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2017/05/13/12/40/fashion-2309519_960_720.jpg',
								price: 200,
								o_price: 800,
							},
							{
								id: '03',
								name: '康复按摩',
								img: 'https://cdn.pixabay.com/photo/2014/07/02/09/09/best-friends-381984_960_720.jpg',
								price: 200,
								o_price: 800,
							},
						],
					},
				],
			};
		}
	}
</script>

<style lang="scss">
page {
	background-color: #253b55;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	.frCardSwiperCnt {
		.fcs_cnt {
			width: 100%;
			height: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			.fcs_cntTitle {
				width: 100%;
				.fcs_headerBtn {
					width: 168rpx;
					height: 72rpx;
					background: #FFF;
					border-radius: 36px;
				}
			}
			.fcs_cntList {
				width: 100%;
				.fcs_cntListItem {
					width: 186rpx;
					height: 288rpx;
					background: #F8F8F8;
					border-radius: 4rpx;
					.fcs_cntListItemImg {
						width: 100%;
						height: 186rpx;
						display: block;
						border-radius: 4rpx 4rpx 0rpx 0rpx;
					}
					.fcs_cntListItemContent {
						padding: 16rpx 20rpx;
						box-sizing: border-box;
					}
				}
			}
		}
	}
}
</style>
